<template>
  <div class="search">
    <Card>
      <Row type="flex" justify="space-between">
        <Col span="5">
          <div style="background: #fff;padding-left:16px;height: 100%; margin-top: 5px">
            <Input
              suffix="ios-search"
              v-model="searchText"
              @on-change="onSearch"
              placeholder="输入搜索部门"
              clearable
            />
            <div class="tree-bar" :style="{maxHeight: maxHeight}">
              <Tree ref="tre" :data="treeData" @on-select-change="selectTree"></Tree>
              <Spin size="large" fix v-if="treeLoading"></Spin>
            </div>
          </div>
        </Col>
        <Col span="18">
          <Row @keydown.enter.native="handleSearch">
            <Form ref="queryForm" :model="queryForm" inline :label-width="70">
            <Form-item label="登录账号" prop="username">
              <Input
                type="text"
                v-model="queryForm.username"
                clearable
                placeholder="请输入登录账号"
                style="width: 200px"
              />
            </Form-item>
            <Form-item label="手机号" prop="phone">
              <Input
                type="text"
                v-model="queryForm.phone"
                clearable
                placeholder="请输入手机号"
                style="width: 200px"
              />
            </Form-item>
            <Form-item label="邮箱" prop="email">
              <Input
                type="text"
                v-model="queryForm.email"
                clearable
                placeholder="请输入邮箱"
                style="width: 200px"
              />
            </Form-item>
              <Form-item style="margin-left:-35px;" class="br">
                <Button @click="handleSearch" type="primary" size="large" icon="ios-search">搜索</Button>
                <Button @click="handleReset" size="large">重置</Button>
              </Form-item>
            </Form>
          </Row>
          <Row class="operation">
            <Button @click="add" size="large" type="primary" icon="md-add">添加</Button>
            <Button @click="deleteAll" size="large" icon="md-trash">删除</Button>
          </Row>
          <Row>
            <Alert show-icon>
              已选择
              <span class="select-count">{{selectCount}}</span> 项
              <a class="select-clear" @click="clearSelectAll">清空</a>
            </Alert>
          </Row>
          <Row>
            <Table
              :loading="loading"
              border
              :columns="columns"
              :data="data"
              sortable="custom"
              @on-sort-change="changeSort"
              @on-selection-change="showSelect"
              ref="table"
            ></Table>
          </Row>
          <Row type="flex" justify="end" class="page">
            <Page
              :current="queryForm.pageNum"
              :total="total"
              :page-size="queryForm.pageSize"
              @on-change="changePage"
              @on-page-size-change="changePageSize"
              :page-size-opts="[10,20,50]"
              size="small"
              show-total
              show-elevator
              show-sizer
            ></Page>
          </Row>
        </Col>
      </Row>
      <user-form ref="userFormModal" @ok="handleOk"></user-form>
    </Card>
  </div>
</template>

<script>
import {queryUserList,deleteUser,disableUser,enableUser} from "@/api/user";
import {getDeptTree,searchDept} from "@/api/dept";
import UserForm from "@/view/admin/form/UserForm";
export default {
  name: "User",
  components:{
    UserForm
  },
  data (){
    return {
      height:510,
      openSearch:true,
      queryForm:{
        username:'',
        phone:'',
        email:'',
        pageNum:1,
        pageSize:10
      },
      searchText:'',
      maxHeight: "500px",
      treeLoading:false,
      treeData: [],
      openTip:false,
      loading:false,
      total:null,
      drop:true,
      dropDownContent: "展开",
      dropDownIcon: "ios-arrow-down",
      selectData:[],
      columns:[
        {
          type: "selection",
          width: 60,
          align: "center",
          fixed: "left"
        },
        {
          type: "index",
          width: 60,
          align: "center",
          fixed: "left"
        },
        {
          title:'账号',
          key:'username',
          minWidth: 60,
          align: 'center',
          sortable: true,
        },
        {
          title: '手机号码',
          align: 'center',
          key: 'phone',
          minWidth: 60
        },
        {
          title: '邮箱',
          align: 'center',
          key: 'email',
          minWidth: 60
        },
        {
          title: "状态",
          key: "status",
          align: "center",
          width: 110,
          render: (h, params) => {
            if (params.row.lockFlag == 0) {
              return h("div", [
                h("Badge", {
                  props: {
                    status: "success",
                    text: "正常启用"
                  }
                })
              ]);
            } else if (params.row.lockFlag == -1) {
              return h("div", [
                h("Badge", {
                  props: {
                    status: "error",
                    text: "禁用"
                  }
                })
              ]);
            }
          },
          filters: [
            {
              label: "正常启用",
              value: 0
            },
            {
              label: "禁用",
              value: -1
            }
          ],
          filterMultiple: false,
          filterRemote: e => {
            let v = "";
            if (e.length > 0) {
              v = e[0];
            }
            this.queryForm.lockFlag = v;
            this.queryForm.pageNum = 1;
            this.getUserList();
          }
        },
        {
          title: '创建时间',
          align: 'center',
          key: 'createTime',
          sortable: true,
          sortType: "desc",
          minWidth: 80
        },
        {
          title: "操作",
          key: "action",
          width: 200,
          align: "center",
          fixed: "right",
          render: (h, params) => {
            let enableOrDisable = "";
            if (params.row.lockFlag == 0) {
              enableOrDisable = h(
                "Button",
                {
                  props: {
                    size: "small"
                  },
                  style: {
                    marginRight: "5px"
                  },
                  on: {
                    click: () => {
                      this.disable(params.row);
                    }
                  }
                },
                "禁用"
              );
            } else {
              enableOrDisable = h(
                "Button",
                {
                  props: {
                    type: "success",
                    size: "small"
                  },
                  style: {
                    marginRight: "5px"
                  },
                  on: {
                    click: () => {
                      this.enable(params.row);
                    }
                  }
                },
                "启用"
              );
            }
            return h("div", [
              h(
                "Button",
                {
                  props: {
                    type: "primary",
                    size: "small"
                  },
                  style: {
                    marginRight: "5px"
                  },
                  on: {
                    click: () => {
                      this.edit(params.row);
                    }
                  }
                },
                "编辑"
              ),
              enableOrDisable,
              h(
                "Button",
                {
                  props: {
                    type: "error",
                    size: "small"
                  },
                  on: {
                    click: () => {
                      this.remove(params.row);
                    }
                  }
                },
                "删除"
              )
            ]);
          }
        }
      ],
      data:[],
      selectCount:0,
    }
  },
  methods:{
    handleSearch(){
      this.getUserList();
    },
    handleReset(){
      this.$refs['queryForm'].resetFields();
    },
    changePage(value){
      this.queryForm.pageNum=value;
      this.getUserList();
    },
    initDeptTree(){
      getDeptTree().then(res=>{
        if(res.code===200){
          this.treeData=res.data
        }
      })
    },
    changePageSize(value){
      this.queryForm.pageSize=value;
      this.getUserList();
    },
    changeSort(){

    },
    disable(row){
      this.$Modal.confirm({
        title: "确认禁用",
        content: "您确认要禁用用户 " + row.username + " ?",
        loading: true,
        onOk: () => {
          disableUser(row.userId).then(res => {
            this.$Modal.remove();
            if (res.code===200) {
              this.$Message.success("操作成功");
              this.getUserList();
            }
          });
        }
      });
    },
    enable(row){
      this.$Modal.confirm({
        title: "确认禁用",
        content: "您确认要启用用户 " + row.username + " ?",
        loading: true,
        onOk: () => {
          enableUser(row.userId).then(res => {
            this.$Modal.remove();
            if (res.code===200) {
              this.$Message.success("操作成功");
              this.getUserList();
            }
          });
        }
      });
    },
    showSelect(e){
      this.selectData=e;
      this.selectCount=e.length
    },
    clearSelectAll(){
      this.selectCount=0;
      this.selectList=[];
      this.$refs.table.selectAll(false);
    },
    edit(row){
      this.$refs.userFormModal.edit(row);
      this.$refs.userFormModal.title = '修改用户'
    },
    add(){
      this.$refs.userFormModal.add();
      this.$refs.userFormModal.title = '新增用户'
    },
    deleteAll(){
      if(this.selectData.length<=0){
        this.$Message.warning("请至少选择一条数据");
        return;
      }
      this.$Modal.confirm({
        title: '提示',
        content: '您确认要删除所选的'+this.selectData.length+'条数据吗？删除后无法恢复！',
        onOk: () => {
          let ids='';
          this.selectData.forEach(e=>{
            ids+=e.userId+","
          })
          ids=ids.substring(0,ids.length-1);
          deleteUser(ids).then(res=>{
            if(res.code===200){
              this.$Message.success('删除成功');
              this.$Modal.remove()
            }
            this.getUserList();
          })
        }
      });
    },
    getUserList(){
      this.loading=true
      queryUserList(this.queryForm).then(res=>{
        if(res.code===200){
          this.data=res.data.records;
          this.total=res.data.total;
        }
        this.loading=false;
      })
    },
    onSearch(){
      if(this.searchText){
        this.treeLoading=true;
        this.treeData=[];
        searchDept({searchText:this.searchText}).then(res=>{
          if(res.code===200){
            this.treeData=res.data;
          }
          this.treeLoading=false;
        })
      }else{
        this.initDeptTree();
      }
    },
    remove(row){
      this.selectCount=1;
      this.selectData.push(row);
      this.deleteAll();
    },
    selectTree(value){
      if(value.length>0){
        let selectData=value[0];
        this.queryForm.deptId=selectData.deptId;
        this.getUserList();
      }
    },
    handleOk(){
      this.getUserList();
    }
  },
  mounted(){
    this.height = Number(document.documentElement.clientHeight - 230);
    this.getUserList();
    this.initDeptTree();
  }
}
</script>

<style lang="less">
@import "../../styles/tree&table-common.less";
.ivu-tree ul {
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 14px!important;
}
</style>
